<style lang="scss" scoped>
	.c1 {padding: 0 20px;position: relative;}
	.c2{align-items: flex-start;position: absolute;right: 20px;z-index: 1;}
	.c4 {position: relative;cursor: pointer;margin-right: 10px;overflow: hidden;}
	.c4 input{position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;filter: alpha(opacity=0);cursor: pointer}
</style>
<template>
	<div class="root">
		<an-nav></an-nav>

		<cropper-img
			v-model:show="cutImg.show"
			:name="pageData.spaceValue" 
			:pic="cutImg.pic" 
			@img="getList">
		</cropper-img>
		
		<div class="c1">
			<div class="c2 flex">
				<el-button class="c4" type="primary">
					<input
						type="file"
						ref="uploadInput" 
						accept="image/jpg, image/jpeg, image/png" 
						@change="selectFile">
					单图裁剪上传到{{pageData.spaceValue}}
				</el-button>
				
				<el-upload :data="upQiniu" :http-request="upQiniuImg" :multiple="true" :before-upload="imgFun" :show-file-list="false"
					action="http://upload-z2.qiniup.com" :auto-upload="true">
						<el-button type="primary">多图上传到{{pageData.spaceValue}}</el-button>
				</el-upload>
			</div>
			<el-tabs v-model="pageData.spaceValue" @tab-click="handleClick">
			    <el-tab-pane :label="v.label" :name="v.value" v-for="(v,i) in pageData.spaceList" :key="i">
					<el-table ref="tableRef" height="calc(100vh - 250px)" :data="pageData.list" stripe style="width: 100%;min-height:50vh;">
						<el-table-column label="id" prop="id" width="60"> </el-table-column>
						<el-table-column label="图片" width="80">
							<template #default="scope">
								<el-popover
								    placement="right"
								    :width="300"
								    trigger="hover">
									<a :href="config.serverImg + scope.row.key" target="_blank">
										<img :src="config.serverImg + scope.row.key +'?imageView2/0/format/webp/q/75'" alt="" style="width: 100%;max-height: 300px;">
									</a>
								    <template #reference>
								      <el-image :src="config.serverImg + scope.row.key +'?imageView2/0/format/webp/q/75'" fit="cover" lazy style="width: 40px; height: 40px">
								      </el-image>
								    </template>
								</el-popover>
					
							</template>
						</el-table-column>
						<el-table-column label="文件名称">
							<template #default="scope">
								<div class="line-2">{{config.serverImg + scope.row.key}}</div>
							</template>
						</el-table-column>
						<el-table-column label="上传时间" width="200">
							<template #default="scope">
								<div class="line-1">{{time(scope.row.create_time,"yyyy-mm-dd hh:MM:ss")}}</div>
							</template>
						</el-table-column>
						<el-table-column label="操作" width="140">
							<template #default="scope">
								<el-button @click="copy(config.serverImg + scope.row.key)" type="text" size="small">复制</el-button>
								<el-button type="text" size="small" @click="delImg(scope.row,scope.$index)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-tab-pane>
			</el-tabs>
		</div>
		
		<!-- 分页 -->
		<div style="margin-top: 10px;">
			<el-pagination
				background
				@size-change="switchSizeChange"
				@current-change="switchCurrentChange"
				v-model:currentPage="pageData.page"
				:default-page-size="20"
				layout="total,prev, pager, next,sizes"
				:page-sizes="[20, 30, 40, 50, 100]"
				:total="pageData.total">
		  	</el-pagination>
		</div>
		
	</div>
</template>

<script setup>
	import cropperImg from '@/components/cropper-img.vue'
	
	import upImg from "@/hook/upimg.js";
	const {upQiniu,imgFun,getQnToken,delQnImg,getQnKey,upFile} = upImg(); //获取上传配置

	import time from "@/utils/timeFormat.js";

	import publicJS from "@/hook/public.js";
	const {copy,aTips,config,api,ElMessage} = publicJS();

	// 页面数据
	const pageData = reactive({
		list: [],//列表
		spaceValue:'other',//空间名称
		spaceList:config.spaceList,
		total:0,
		page:1,
		limit:20,
	});

	const uploadInput = ref(null)
	const cutImg = reactive({
		show:false,
		pic:''
	});
	
	localStorage.setItem("prefix", pageData.spaceValue);
	
	
	
	//选择文件
	const selectFile = (e) => {
	      cutImg.pic = ''
	      // 获取选取的文件
	      const target = e.target
	      const { files } = target
	      if (!files) return
	      const file = files[0]
	      // 转换为base64传给裁切组件
	      const reader = new FileReader()
	      reader.readAsDataURL(file)
	      reader.onload = () => {
	        // 更新裁切弹窗的图片源
	        cutImg.pic = String(reader.result)
			cutImg.show = true;
	
	        // 清空已选择的文件
	        if (!uploadInput.value) return
	        uploadInput.value.value = ''
	      }
	}
	
	//获取列表
	const getList = ()=>{
		api.post("api/Img/get_list",{
			prefix:pageData.spaceValue,
			limit:pageData.limit,
			page:pageData.page,
		}).then(res=>{
			pageData.total = res.total
			pageData.list = res.data.list.map(r=>{
				return{
					id:r.id,
					...r
				}
			})
		})
	}
	getList();

	//同步七牛云空间文件 所有文件
	// pageData.spaceList.forEach(v=>{
	// 	api.post("a/other/getQiniuFile",{
	// 		name:'other',
	// 		limit:1000,
	// 		marker:'',
	// 		prefix:v.value,//需要同步的文件前缀
	// 		is_sync:'1',//是否同步 1是 0否
	// 	}).then(res=>{
	// 		console.log(res);
	// 	})
	// })
	
	//同步七牛云空间文件 指定前缀
	// api.post("a/other/getQiniuFile",{
	// 	name:'other',
	// 	limit:1000,
	// 	marker:'',
	// 	prefix:'card',//需要同步的文件前缀
	// 	is_sync:'1',//是否同步 1是 0否
	// }).then(res=>{
	// 	console.log(res);
	// })

	// 切换每页条数
	const switchSizeChange = (val)=> {
	    console.log(`每页 ${val} 条`)
		pageData.limit = val;
		getList();
	}
	
	// 点击分页
	const tableRef = ref(null);
	const switchCurrentChange = (val)=> {
	    console.log(`当前页: ${val}`)
		// tableRef.value.setScrollTop(0);//滚动条置顶
		getList();
	}

	//切换空间
	// const swicthSpace = ()=>{
	// 	pageData.page = 0;
	// 	pageData.list = [];
		
	// 	getList();
	// }
	
	//切换空间 前缀
	const handleClick = (tab, event)=>{
		console.log(tab, event)
		pageData.list = [];
		setTimeout(()=>{
			localStorage.setItem("prefix", pageData.spaceValue);
			pageData.page = 1;
			getList();
		},0)

	}
	
	//覆盖默认的 Xhr 行为，允许自行实现上传文件的请求
	const upQiniuImg = (data)=>{
		var reader = new FileReader();
		reader.readAsDataURL(data.file);
		reader.onloadend = function () {
		    var base64 = reader.result;
		    upFile(pageData.spaceValue,base64,res=>{
		    	getList();
		    })
		}
	}
	
	//删除文件
	const delImg = (v, index) => {
		aTips('确定删除文件？',(e)=>{
			delQnImg(v,pageData.spaceValue).then(r=>{
				pageData.list.splice(index, 1);
				if (r.code == 200) {
					ElMessage({
						message: '删除成功',
						type: 'success'
					})
				} else {
					ElMessage({
						message: '删除失败',
						type: 'error'
					})
				}
			})
		})
	}
	
	
</script>
